<template>
  <div class="table-box">
    <ProTable
      ref="proTable"
      title="菜单列表"
      row-key="menuId"
      :indent="20"
      :columns="columns"
      :request-api="getTableList"
      :pagination="false"
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button type="primary" :icon="CirclePlus" :disabled="!BUTTONS['system:menu:add']">新增菜单 </el-button>
      </template>
      <!-- 菜单图标 -->
      <template #icon="scope">
        <el-icon :size="18" v-if="scope.row.icon">
          <component :is="scope.row.icon"></component>
        </el-icon>
      </template>
      <!-- 菜单操作 -->
      <!-- <template #operation>
        <el-button type="primary" link :icon="EditPen" :disabled="!BUTTONS['system:menu:edit']"> 编辑 </el-button>
        <el-button type="primary" link :icon="Delete" :disabled="!BUTTONS['system:menu:delete']"> 删除 </el-button>
      </template> -->
    </ProTable>
  </div>
</template>

<script setup lang="ts" name="menuMange">
import { useAuthButtons } from "@/hooks/useAuthButtons";
import { ref } from "vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { CirclePlus } from "@element-plus/icons-vue";
import ProTable from "@/components/ProTable/index.vue";
import { getMenuList } from "@/api/modules/menu";

// 权限按钮
const { BUTTONS } = useAuthButtons();

const proTable = ref();

// 表格配置项
const columns: ColumnProps[] = [
  { prop: "menuTitle", label: "菜单标题", width: 250, align: "left", search: { el: "input" } },
  { prop: "menuName", label: "菜单 name", search: { el: "input" } },
  { prop: "menuType", label: "菜单类型" },
  { prop: "path", label: "菜单路径", width: 300 },
  { prop: "component", label: "组件路径", width: 300 },
  { prop: "perms", label: "权限标识" },
  { prop: "menuSort", label: "排序" },
  { prop: "icon", label: "菜单图标" },
  { prop: "status", label: "是否停用" }
  // { prop: "operation", label: "操作", width: 150, fixed: "right" }
];

const getTableList = (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  return getMenuList(newParams);
};
</script>
